<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>写评语-云校通-家长</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart id="week-comment-detail">
	<div class="weui_tab tab-bottom">
		<div class="weui-header bg-blue"> 
	  		<div class="weui-header-left"> <a onclick="back()" href="javascript:" class="icon icon-109 f-white">返回</a> </div>
	    	<h1 class="weui-header-title">每周点评家长回评</h1>
	    </div>
		<div class="weui_tab_bd">
			<div class="dianping">
			    <ul id="teacherTypeList">
			    </ul>
			</div>
			<div class="pingyu1">
			    <header>
			      <img src="<%=basePath %>/images/iconZ.png">
			      <h4>${detail.studentName }的老师 第${detail.weekNo }周评语</h4>
			    </header>
			    <p class="artical">${detail.teacherCommentContent }</p>
				<div class="weui_cells mt0">
			    	<div class="weui_cell moments__post" style="padding: 0;">
	          			<div class="weui_cell_bd">
	            			<div class="thumbnails img-click">
		            			<c:forEach var="itm" items="${detail.attachList }">
		            				<div class="thumbnail">
		            					<img class="weui_media_appmsg_thumb" onclick="imgClick(this)" src="${config.imgUrl}${itm.attachmentUrl }"/>
		            				</div>
		            			</c:forEach>
	          				</div>
	        			</div>
	        		</div>
                </div>
			</div>
			<div class="pingyu1">
			    <header>
			      <img src="<%=basePath %>/images/iconZ.png">
			      <h4>学生自评</h4>
			    </header>
			    <div class="dianping pb5" id="studentComment">
			    	<div class="weui_cells weui_cells_form mt0">
			    		<div class="weui_cells_title f-green">本周，我学会了</div>
			            <div class="weui_cell">
			                <div class="weui_cell_bd weui_cell_primary">
			                     <textarea style="height: 60px; margin-top: 0; margin-left: 0; width: 100%;"></textarea>
			                </div>
			            </div>
			        </div>
			        <div class="weui_cells weui_cells_form mt0">
			    		<div class="weui_cells_title f-red">同时，令我感到欣喜的事情有：</div>
			            <div class="weui_cell">
			                <div class="weui_cell_bd weui_cell_primary">
			                     <textarea style="height: 60px; margin-top: 0; margin-left: 0; width: 100%;"></textarea>
			                </div>
			            </div>
			        </div>
			        <div class="weui_cells weui_cells_form mt0">
			    		<div class="weui_cells_title f-blue">这一周总体来说，我觉得自己</div>
			            <div class="weui_cell">
			                <div class="weui_cell_bd weui_cell_primary">
			                     <textarea style="height: 60px; margin-top: 0; margin-left: 0; width: 100%;"></textarea>
			                </div>
			            </div>
			        </div>
			        <div class="weui_cells weui_cells_form mt0">
			    		<div class="weui_cells_title f-orange">希望在下一周，我能</div>
			            <div class="weui_cell">
			                <div class="weui_cell_bd weui_cell_primary">
			                     <textarea style="height: 60px; margin-top: 0; margin-left: 0; width: 100%;"></textarea>
			                </div>
			            </div>
			        </div>
			    </div>
			 </div>
			<div class="pingyu1">
			    <header>
			      <img src="<%=basePath %>/images/iconZ.png">
			      <h4>家长回评</h4>
			    </header>
			    <div class="dianping">
				    <ul id="commentList">
				    </ul>
				</div>
				<div class="weui_cells weui_cells_form mt0">
		            <div class="weui_cell">
		                <div class="weui_cell_bd weui_cell_primary">
		                     <textarea placeholder="请输入对小孩的评语内容" id="parentCommentContent">${detail.parentCommentContent }</textarea>
		                </div>
		            </div>
		            <div class="weui_uploader">
	                    <div class="weui_uploader_bd">
	                      <ul class="weui_uploader_files img-click" id="img1">
	                      	<c:forEach var="itm" items="${detail.attachList }">
	                      		<c:choose>
	                      			<c:when test="${itm.parentStudentRelId != null }">
		                      			<li class="weui_uploader_file" data-id="${itm.id }" data-src="${itm.attachmentUrl }" style="margin-right:0;margin-bottom:16px;position: relative;">
			                      			<div class="img-del" onclick="imgDel(this)">
			                      				<span class="icon icon-26"></span>
			                      			</div>
			                      			<img onclick="imgClick(this)" src="${config.imgUrl}${itm.attachmentUrl }"/>
			                      		</li>
	                      			</c:when>
	                      			<c:otherwise>
	                      				<li class="weui_uploader_file hide" data-id="${itm.id }" class="hide">
			                      		</li>
	                      			</c:otherwise>
	                      		</c:choose>
	                      	</c:forEach>
	                      </ul>
	                      <div class="weui_uploader_input_wrp" id="filePicker" style="margin-bottom: 20px; margin-left: 15px; width: 60px; height: 60px; border-radius: 5px;">
	                      </div>
	                    </div>
	                </div>
		        </div>
			</div>
			<div class="weui_btn_area mb55">
			    <a href="javascript:" id="submit" class="weui_btn bg-blue">提交</a>
			</div>
		</div>
	</div>
	<input type="hidden" id="studentCommentContent" value="${detail.studentCommentContent}"/>
</body>
<script type="text/javascript">
	$(function() {
		init();
		initParentCommentType();
		$("#submit").click(function() {
			var parentCommentType = "";
			var list = $("#commentList li");
			var isOk = true;
			for(var i = 0; i < list.length; i++) {
				var obj = list[i];
				var type = $(obj).find("p:first").html();
				var star = $(obj).find(".f-red").length;
				if(star == 0) {
					isOk = false;
					$.alert(type + "未评","");
					break;
				}
				parentCommentType += type+"|"+star + ((i+1)<list.length ? "," : "");
			}
			if(!isOk) return;
			var parentCommentContent = $("#parentCommentContent").val();
			if(parentCommentContent.trim() == "") {
				$.alert("请填写学生评语", "");
				return;
			}
			var studentCommentContent = "";
			$("#studentComment .weui_cells").each(function(i, v) {
				studentCommentContent += $(v).find(".weui_cells_title").html();
				studentCommentContent += "a|a" + $(v).find("textarea").val().replace(/"/g,"”");
				if(i + 1 < $("#studentComment .weui_cells").length) studentCommentContent += "b,b";
			})
			$.confirm("确认提交后24个小时内可以修改", "确认提交回评?", function() {
				$.ajax({
					url: basePath + "/xs/week/comment/submit",
			        type: 'POST',
			        dataType: 'json',
			        data: {
			        	id: "${detail.id}",
			        	studentId: "${detail.studentId}",
			        	parentId: "${user.parent.id}",
			        	parentCommentContent: parentCommentContent,
			        	parentCommentType: parentCommentType,
			        	studentCommentContent: studentCommentContent,
			        	weekNo: "${detail.weekNo}"
			        },
					async : false,
					success : function(data) {
						if(data.code == '000') {
							$.toast("提交成功！");
							setTimeout(function(){
								window.location.href = basePath + "/xs/week/comment?sid=${detail.studentId}&v=" + new Date().getTime();
							}, 1000);
						}else {
							$.toptips(data.msg);
						}
					}, error:function(){
						$.alert("提交异常","");
					}
				})
			})
		})
	})
	function init() {
		initTypeHtml("${detail.teacherCommentType}", "teacherTypeList");
		var studentCommentContent = $("#studentCommentContent").val();
		if(studentCommentContent.length > 0) {
			initStudentCommentHtml(studentCommentContent);
		}
	}
	function initStudentCommentHtml(studentComment) {
		var array = studentComment.split("b,b");
		$("#studentComment .weui_cells").each(function(i, v) {
			for(var i in array) {
				var array1 = array[i].split("a|a");
				if(array1[0] == $(v).find(".weui_cells_title").html()) {
					$(v).find("textarea").val(array1[1]);
					break;
				}
			}
		})
	}
	function initTypeHtml(commentType, id) {
		var teaTypeList = commentType.split(",");
		var teaTypeHtml = "";
		for(var i in teaTypeList) {
			var itm = teaTypeList[i];
			var array = itm.split("|");
			teaTypeHtml += '<li>\
		        <img src="<%=basePath%>/images/iconJ.png"><p>'+array[0]+'</p>\
		        <div class="star-box">\
		          <span class="icon'+(parseInt(array[1]) >= 1 ? " icon-48 f-red" : " icon-49")+'"></span>\
		          <span class="icon'+(parseInt(array[1]) >= 2 ? " icon-48 f-red" : " icon-49")+'"></span>\
		          <span class="icon'+(parseInt(array[1]) >= 3 ? " icon-48 f-red" : " icon-49")+'"></span>\
		          <span class="icon'+(parseInt(array[1]) >= 4 ? " icon-48 f-red" : " icon-49")+'"></span>\
		          <span class="icon'+(parseInt(array[1]) >= 5 ? " icon-48 f-red" : " icon-49")+'"></span>\
		        </div>\
		      </li>';
		}
		$("#" + id).html(teaTypeHtml);
	}
	function initParentCommentType() {
		$.ajax({
			url: basePath + "/sys/dict/dictData/dictCode",
	        type: 'POST',
	        dataType: 'json',
	        data: {
	        	dictCode: 'parent_comment'
	        },
			async : false,
			success : function(data) {
				if(data != null) {
					var commentList = new Array();
					if('${detail.parentCommentType}'.length > 0) {
						commentList = "${detail.parentCommentType}".split(",");
					}
					var html = "";
					for(var i in data) {
						var itm = data[i];
						if(commentList.length > 0) {
							for(var i in commentList) {
								var type = commentList[i].split("|")[0];
								var num = commentList[i].split("|")[1];
								if(type == itm.dictDataValue) {
									html += '<li>\
								        <img src="<%=basePath%>/images/iconJ.png"><p>'+itm.dictDataValue+'</p>\
								        <div class="star-box">\
								          <span class="icon'+(parseInt(num) >= 1 ? " icon-48 f-red" : " icon-49")+'"></span>\
								          <span class="icon'+(parseInt(num) >= 2 ? " icon-48 f-red" : " icon-49")+'"></span>\
								          <span class="icon'+(parseInt(num) >= 3 ? " icon-48 f-red" : " icon-49")+'"></span>\
								          <span class="icon'+(parseInt(num) >= 4 ? " icon-48 f-red" : " icon-49")+'"></span>\
								          <span class="icon'+(parseInt(num) >= 5 ? " icon-48 f-red" : " icon-49")+'"></span>\
								        </div>\
								      </li>';
								}
							}
						}else {
							html += '<li>\
						        <img src="<%=basePath%>/images/iconJ.png"><p>'+itm.dictDataValue+'</p>\
						        <div class="star-box">\
						          <span class="icon icon-49"></span>\
						          <span class="icon icon-49"></span>\
						          <span class="icon icon-49"></span>\
						          <span class="icon icon-49"></span>\
						          <span class="icon icon-49"></span>\
						        </div>\
						      </li>';
						}
					}
					$("#commentList").html(html);
					starInit();
				}
			}, error:function(){
				$.alert("查询异常","");
			}
		})
	}
	//拍照或从手机相册中选图接口
    $('#filePicker').on('click', function () {
    	if($("#img1 img").length >= 2) {
    		$.alert("抱歉，最多只能传2张照片！","");
    		return;
    	}
        wx.chooseImage({
            count: 1,
            needResult: 1,
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
           		var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
           		wxuploadImage(localIds);
            },
            fail: function (res) {
                alterShowMessage("操作提示", JSON.stringify(res), "1", "确定", "", "", "");
            }

        });
    });
	function wxuploadImage(localIds) {  
		var localId = localIds.pop();
        wx.uploadImage({  
            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得  
            isShowProgressTips: 1, // 默认为1，显示进度提示  
            success: function (res) {  
                mediaId = res.serverId; // 返回图片的服务器端ID  
                wechatMediaDownload(mediaId);
                if(localIds.length > 0){
                	wxuploadImage(localIds);
                }
            },  
            fail: function (error) {  
                alert(Json.stringify(error));  
            }  
        });
    }  
	function wechatMediaDownload(mediaId) {
	   	var params = {};
	   	params.mediaId = mediaId;
        params.attachmentType = "image";
        params.relationType = "weekComment";
        params.relationId = emptyToNull("${detail.id}");
        $.ajax({
	 		url : basePath + "/xs/attchment/upload/wx",
	 		type : "post",
	 		data : params,
	 		dataType : "json",
	 		async : false,
	 		success : function(data) {
	 			if(data.code != '000') {
	 				$.toast(data.msg, "cancel");
	 			}else {
	 				$('#img1').append('<li class="weui_uploader_file" data-id="'+data.data.id+'" style="margin-right:0;margin-bottom:16px;position: relative;"><div class="img-del" onclick="imgDel(this)"><span class="icon icon-26"></span></div><img onclick="imgClick(this)" src="'+ imgUrl + data.data.attachmentUrl +'"/></li>'); 
	 			}
	 		}, error:function(){
	 			$.alert("上传异常","");
      		}
	 	});
   }
	function starInit() {
	    //星星评价-star-
	    var li = document.getElementById("commentList").getElementsByTagName('li');
	    for (var i=0;i<li.length;i++) {
	      var j = li[i];
	      j.index = i;
	      li[i].onmouseover = function () {
	        var star = li[this.index].getElementsByClassName("icon-49");
	        var star2 = li[this.index].getElementsByClassName("icon-48");

	        for (var a=0;a<star.length;a++) {
	          var b = star[a];
	          b.index = a;
	          star[a].onclick = function () {
	            var c = this.index;
	            for(var d=0;d<5;d++){
	              if(c>=0){
	                star[c].className = "icon icon-48 f-red";
	                c=c-1;
	              }
	            }
	          }
	        };
	        var le = li[this.index].getElementsByClassName("icon-48").length;
	        for (var e=0;e<star2.length;e++) {
	          var f = star2[e];
	          f.index = e;
	          star2[e].onclick = function () {
	            var g = this.index;
	            for(var h=g+1;h<le;h++){
	              if(g+1<le){
	                star2[g+1].className = "icon icon-49";
	              }
	            }
	          }
	        }
	      }
	    }
	}
</script>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
</html>